<template>
    <div class="privacy">
        <div class="title">
            <span>隐私设置</span>
            <el-button type="text" @click="setVisitAndHidePower">保存</el-button>
        </div>
        <div class="content">
            <el-form label-position="top">
                <el-form-item label="谁可以访问我的空间：" style="text-align: left">
                    <el-select v-model="space">
                        <el-option label="所有人" value="1024"></el-option>
                        <el-option label="仅自己" value="1025"></el-option>
                        <el-option label="好友可访问" value="1026"></el-option>
                        <el-option label="关注可访问" value="1027"></el-option>
                        <el-option label="班级可访问" value="1028"></el-option>
                        <el-option label="学校可访问" value="1029"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="谁可以评论：" style="text-align: left">
                    <el-select v-model="comment">
                        <el-option label="所有人" value="1024"></el-option>
                        <el-option label="仅自己" value="1025"></el-option>
                        <el-option label="好友可评论" value="1026"></el-option>
                        <el-option label="关注可评论" value="1027"></el-option>
                        <el-option label="班级可评论" value="1028"></el-option>
                        <el-option label="学校可评论" value="1029"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
<!--            <div class="no_look">-->
<!--                <div class="noLook_title">-->
<!--                    <span>动态屏蔽不看谁的动态（1/45）</span>-->
<!--                    <el-button type="text" class="btn">设置</el-button>-->
<!--                </div>-->
<!--                <div class="noLook_list clearFix">-->
<!--                    <div class="list">-->
<!--                        <el-avatar :size="60" src="@a/img/headportrait01.jpg" @error="errorHandler">-->
<!--                            <img src="@a/img/headportrait01.jpg"/>-->
<!--                        </el-avatar>-->
<!--                        <span class="name">昙花一现</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                userInfo: state => state.userModule.userInfo
            })
        },
        created(){
            this.getVisitAndHidePower()
        },
        data(){
            return{
                space: '1024',
                comment: '1024'
            }
        },
        methods:{
            setVisitAndHidePower(){
                this.$store.dispatch('personalModule/visitAndHidePower', {
                    spaceVisitJuris: this.space || '1024',
                    discussJuris: this.comment || '1024',
                    id: this.userInfo.id,
                }).then(res => {
                    if(res){
                        this.$message.success('设置成功')
                    }
                })
            },
            getVisitAndHidePower(){
                this.$store.dispatch('personalModule/getVisitAndHidePower', {
                    userId: this.userInfo.id,
                }).then(res => {
                    this.space = res.list[0].spaceVisitJuris+'' 
                    this.comment = res.list[0].discussJuris+''
                })
            },
            errorHandler(){
                return true;
            }
        }
    }
</script>

<style lang="scss" scoped>
.privacy{
    width: 100%;
    .title{
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #DCDFE6;
    }
    .content{
        box-sizing: border-box;
        padding-top: 10px;
        padding-left: 15px;
        .noLook_title{
            font-size: 14px;
            color: #606266;
            text-align: left;
            .btn{
                margin-left: 20px;
            }
        }
        .noLook_list{
            box-sizing: border-box;
            padding-top: 15px;
            .list{
                float: left;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #606266;
                width: 200px;
                border: 1px solid #DCDFE6;
                box-sizing: border-box;
                padding: 10px;
                margin-right: 20px;
                margin-bottom: 20px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                .name{
                    margin-left: 15px;
                }
            }
        }
    }
}
.clearFix::after{
    content: "";
    display: block;
    width: 100%;
    font-size: 0;
    clear: both;
}
</style>